<template>
  <div id="userEntry">
    <img src="../../../src/assets/img/login/bgimg.jpg" height="100%" width="100%" class="bgimg">
    <el-row id="headerTop">
      <el-col :span="14" :offset="3">
        <p class="headTitleText">{{headTitleText}}</p>
      </el-col>
    </el-row>
    <div id="loginBody">
      <el-row class="logoText">
        <el-col :span="23" :offset="1">
          <h1 class="logoText1">{{logoText1}}</h1>

        </el-col>
      </el-row>
      <el-row class="UserEntry">
        <el-col :span="24">
          <el-row>
            <el-col :span="8" :offset="8" class="loginContent">
              <!-- logo -->
              <el-row :gutter="20">
                <el-col :span="24" :offset="11">
                  <img src="../../../src/assets/img/home/logo.png" height="60" width="80">
                </el-col>
              </el-row>
              <!-- 登录框 -->
              <el-row class="login">
                <el-col :span="21">
                  <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item prop="accountNumber">
                      <el-row>
                        <el-col :span="24">
                          <el-input v-model="ruleForm.accountNumber" placeholder="请输入手机号/邮箱" class="input"></el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item prop="passWords">
                      <el-row>
                        <el-col :span="24">
                          <el-input type="password" v-model="ruleForm.passWords" placeholder="请输入密码"
                                    @keyup.enter.native="submitForm">
                          </el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item prop="verifyCode" v-if="m===true">
                      <el-row>
                        <el-col :span="15">
                          <el-input v-model="ruleForm.verifyCode" auto-complete="off" placeholder="请输入验证码"
                                    @keyup.enter.native="submitForm"></el-input>

                        </el-col>
                        <el-col :span="9" class="verifyImg">
                          <img :src="this.img">
                        </el-col>
                      </el-row>
                    </el-form-item>
                    <el-form-item class='btn'>
                      <el-row>
                        <el-col :span="24">
                          <div class="grid-content bg-purple">
                            <el-button type="primary" @click="submitForm()" class="loginBtn">登录</el-button>
                          </div>
                        </el-col>
                      </el-row>
                    </el-form-item>
                    </el-form-item>
                    <el-form-item>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row :gutter="20" style="margin-left: 0px;margin-right: 0px;">
                <el-col :span="16" :offset="8">
                  <div class="grid-content bg-purple">
                    <p claas="footerLink">
                      <router-link to="/UserRegister" class="register"><span>新用户 | </span></router-link>
                      <router-link to="/ForgetPassword" class="fotgetPw"><span class="fotgetPw">忘记密码？ | </span>
                      </router-link>
                      <router-link to="/" class="register"><span>返回首页</span></router-link>
                    </p>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="copyright" :gutter="20" style="margin-left:0px; margin-right:0px;">
        <el-col :span="8" :offset="8">
          <div class="grid-content bg-purple-dark">
            <span>版权所有：绵阳市人才管理中心 咨询电话：0816-1234567 技术支持：绵阳市人才管理中心 地址：四川省绵阳</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible"
               size="tiny" :close-on-click-modal="false">
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark">
            <img src="../../../src/assets/img/login/message.png" class="message"/>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="grid-content bg-purple-dark">
            <UserPrompt></UserPrompt>
          </div>
        </el-col>
      </el-row>
      </br>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark" style="text-align:center;">
            <el-button type="primary" @click="routerLink">取 消
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import UserPrompt from '@/components/userLogin/UserPrompt'
  import { postDataToServer } from '../../../src/assets/js/post.js'
  import { getUserType } from '../../../src/assets/js/common.js'
  import { optionCookie } from '../../../src/assets/js/cookie.js'
  import sysData from '../../../src/assets/file/sysId.json'

  export default {
    data () {
      return {
        headTitleText: '绵阳人才市场',
        logoText1: '绵阳人才市场',
        ruleForm: {
          accountNumber: '',
          passWords: '',
          verifyCode: '',
        },
        m: false,
        dialogVisible: false,
        imgUrl: '',
        imgData: 'data:image/png;base64,',
        img: '',
        personalList: [],
        companyList: [],
      }
    },
    components: {
      UserPrompt,
    },
    methods: {
      open (type, message) {
        this.$message({
          type: type,
          message: message
        })
      },
      routerLink () {
        this.$router.push({path: '/'})
      },
      getPrompt () {
        let _this = this
        let pramas = new Object()
        let m = 0
        pramas.subsys_id = sysData[0].sysid
        postDataToServer('ACCOUT_ROLES', pramas).then((data) => {
          if (data.status === 0) {
            _this.m = data.data_list.length
            if (_this.m === 0) {
              _this.dialogVisible = true
            } else {
              _this.$router.push({path: '/'})
            }

          }
        })
      },
      submitForm () {
        var jsSHA = require('jssha')
        var _this = this
        var userParam1 = new Object()
        userParam1.user_account = _this.ruleForm.accountNumber
        postDataToServer('CAPCHA_CHECK', userParam1).then(function (data) {
          if (data.status == 2 || data.status == 3 || data.status == 23) {
            var userParam3 = new Object()
            userParam3.bind_account = _this.ruleForm.accountNumber
            userParam3.account_type = '2'
            userParam3.verify_type = '4'
            postDataToServer('CAPCHA_GET', userParam3).then(function (data) {
              _this.imgUrl = data.data_list
              _this.img = _this.imgData + _this.imgUrl
              _this.m = true
              if (data.status == 0) {
                var userParam4 = new Object()
                var shaObj = new jsSHA('SHA-256', 'TEXT')
                shaObj.update(_this.ruleForm.passWords)
                var hash = shaObj.getHash('HEX')
                userParam4.user_password = hash
                userParam4.user_account = _this.ruleForm.accountNumber
                userParam4.verify_code = _this.ruleForm.verifyCode
                postDataToServer('USER_LOGIN', userParam4).then(function (data) {
                  if (data.status === 0) {
                    let cookie = new Object()
                    cookie.name = 'access_token'
                    cookie.value = data.access_token
                    optionCookie('set', cookie)
                    _this.open('success', '登录成功！')
                    _this.getPrompt()
                  } else {
                    _this.open('warning', data.message)
                  }
                })
              } else {
                _this.open('warning', data.message)
              }
            })
          } else if (data.status == 0) {
            var userParam2 = new Object()
            var shaObj = new jsSHA('SHA-256', 'TEXT')
            shaObj.update(_this.ruleForm.passWords)
            var hash = shaObj.getHash('HEX')
            userParam2.user_password = hash
            userParam2.user_account = _this.ruleForm.accountNumber
            postDataToServer('USER_LOGIN', userParam2).then(function (data) {
              if (data.status == 0) {
                let cookie = new Object()
                cookie.name = 'access_token'
                cookie.value = data.access_token
                optionCookie('set', cookie)
                _this.getPrompt()
              } else {
                _this.open('warning', data.message)
              }
            })
          } else {
            _this.open('warning', data.message)
          }
        })
      },
      //获取用户权限，完善后删除
      centerheight () {
        var userEntryHeight = document.body.clientHeight
        var loginHeight = document.getElementById('loginBody')
        var headerTopHeight = document.getElementById('headerTop').clientHeight
        loginHeight.style.height = (userEntryHeight - headerTopHeight) + 'px'
      },
    },
    mounted () {
      this.centerheight()
    },
  }
</script>

<style scoped>
  a {
    text-decoration: none;
  }

  #headerTop {
    background-color: #105ab9;
    height: 3em;
    color: white;
    font-size: 10px;
  }

  .headTitleText {
    vertical-align: middle;
    display: table-cell;
    text-align: center;
    height: 3em;
  }

  .bgimg {
    position: absolute;
    top: 0;
    bottom: 0;
    filter: blur(0px);
  }

  #loginBody {
    padding-top: 5%;
  }

  .logoText h1 {
    text-align: center;
    color: white;
    font-size: 2em;
  }

  .logo {
    text-align: center;
  }

  .loginimg {
    padding: 0;
  }

  .loginBtn {
    width: 100%;
    font-size: 19px;
  }

  .login {
    text-align: center;
  }

  .login h1 {
    font-size: 15px;
    color: #ffffff;
    font-family: "微软雅黑";
  }

  .btn {
    text-align: center;
  }

  .register:link, .register:active, .register:visited, .register:hover {
    color: #ffffff;
  }

  .fotgetPw:link, .fotgetPw:active, .fotgetPw:visited, .fotgetPw:hover {
    color: #ffffff;
  }

  .copyright {
    margin-top: 4%;
  }

  .copyright span {
    position: fixed;
    bottom: 1%;
    left: 28%;
    text-align: center;
    font-size: 0.7em;
    color: white;
  }

  .verifyImg {
    margin-top: 2%;
  }

  .message {
    height: 60px;
    width: 60px;
  }
</style>
